<template>
	<page-meta>
	    <navigation-bar
			title="设备检修记录--新增"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view style="margin: 20px;">
	    <view class="basicInfo">
			<form @submit="submitForm">
				<uni-section title="基本信息" type="line"></uni-section>
				<view class="example-body message">
					<label class="layui-form-label">站台名称:</label>
					<xfl-select
						:list="stationNameList"
						:clearable="true"
						:showItemNum="5" 
						:listShow="false"
						:isCanInput="false"  
						:style_Container="'height: 50px; font-size: 16px;'"
						:option="optionConf"
						@change="stationNameChange($event)"
						@clear="stationNameChange($event)"
						:selectHideType="'hideAll'"></xfl-select>
					<label class="layui-form-label">专业:</label>
					<xfl-select
						:list="doMainList"
						:clearable="true"
						:showItemNum="5" 
						:listShow="false"
						:isCanInput="false"  
						:style_Container="'height: 50px; font-size: 16px;'"
						:option="optionConf"
						@change="doMainChange($event)"
						@clear="doMainChange($event)"
						:selectHideType="'hideAll'"></xfl-select>
					<label class="layui-form-label">系统名称:</label>
					<xfl-select
						ref='systemName'
						:list="systemNameList"
						:clearable="true"
						:showItemNum="5" 
						:listShow="false"
						:isCanInput="false"  
						:style_Container="'height: 50px; font-size: 16px;'"
						:option="optionConf"
						@change="systemNameChange($event)"
						@clear="systemNameChange($event)"
						placeholder="请先选择专业"
						:selectHideType="'hideAll'"></xfl-select>
					<label class="layui-form-label">设备类型:</label>
					<xfl-select
						ref='eventType'
						:list="eventTypeList"
						:clearable="true"
						:showItemNum="5" 
						:listShow="false"
						:isCanInput="false"  
						:style_Container="'height: 50px; font-size: 16px;'"
						:option="optionConf"
						@change="eventTypeChange($event)"
						@clear="eventTypeChange($event)"
						placeholder="请先选择系统"
						:selectHideType="'hideAll'"></xfl-select>
					<label class="layui-form-label">设备名称:</label>
					<view class="layui-inline">
						<input class="uni-input" name="eventName" placeholder="请输入" autocomplete="off"/>
					 </view>
					<label class="layui-form-label">维修方式:</label>
					<view class="layui-inline">
						<input class="uni-input" name="maintainWay" placeholder="请输入" autocomplete="off" value="计划维修" disabled/>
					</view>
				</view>
				<uni-section title="更新维修记录" type="line"></uni-section>
				<view class="example-body message">
					<view class="layui-col-md6">
						<view class="layui-form-item">
							<label class="layui-form-label">检修日期：</label>
							<view class="layui-inline">
								<i class="layui-icon layui-icon-date"></i>
								<input
									name="maintainDate"
									ref="maintainDate" 
									:value="submitData.maintainDate" 
									placeholder="请选择时间" 
									autocomplete="off" 
									class="uni-input"
									@click="showPop($event, 'maintainDate')"
									disabled >
							</view>
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">检修方式：</label>
							<input name="maintainWay" placeholder="请输入" autocomplete="off" class="uni-input" :value="submitData.maintainWay">
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">检修人员：</label>
							<input name="maintainPerson" placeholder="请输入" autocomplete="off" class="uni-input" :value="submitData.maintainPerson">
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">维修状态:</label>
							<view class="layui-inline">
								<xfl-select
									:list="statuList"
									:clearable="true"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="false"  
									:style_Container="'height: 50px; font-size: 16px;'"
									:initValue="submitData.taskStatu"
									:option="optionConf"
									@change="statuChange($event)"
									@clear="statuChange($event)"
									:selectHideType="'hideAll'"></xfl-select>
							</view>
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">检修内容：</label>
							<input name="maintainContent" placeholder="请输入" autocomplete="off" class="uni-input" :value="submitData.maintainContent">
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">具体描述：</label>
							<textarea  name="describe" placeholder="请输入" autocomplete="off" class="uni-textarea" :value="submitData.describe" />
						</view>
					</view>
				</view>
				<view class="submit-button">
				  <button type="primary" form-type="submit">确定</button>
				</view> 
			</form>
			
			<minPopup heightSize="500" :show="show" @close='close'>
				<minPicker 
					:endTime="endTime" 
					:startTime="startTimes" 
					@cancel="cancel" 
					@sure="sure"></minPicker>
			</minPopup>
			<uni-popup ref="popupMessage" type="center">
				<uni-popup-message type="error" :message="errorMessage" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	
import minPicker from '@/components/min-picker/min-picker.vue'
import minPopup from '@/components/min-picker/min-popup.vue'
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	
export default {
	data () {
		return {
			doMainList: [],
			stationNameList: [],
			systemNameList: [],
			eventTypeList: [],
			statuList: [],
			repairLogInfo: {},
			startTimes:[2010,6,1],
			endTime: 2100,
			show:false,
			targetInputData: '',
			submitData: {
				domain: "",
				eventName: "",
				eventType: "",
				stationName: "",
				systemName: "",
				taskNum: '',
				maintainDate: '',
				maintainWay: '计划维修',
				maintainPerson: '',
				maintainContent: '',
				taskStatu: '',
				describe:'',
			},
			optionConf: {
				label: 'label',
				value: 'value'
			},
			statuList: [],
			mtRecordList: [],
			mtRecordTotal: 0,
			errorMessage: '',
		}
	},
	methods: {
		initDoMain () {
			this.$myRequest({
				url: '/devStatus/getDomain'
			}).then(rep => {
				this.doMainList = rep.result
			})
		},
		initStationName() {
			this.$myRequest({
				url: '/devStatus/getStation'
			}).then(rep => {
				this.stationNameList = rep.result
			})
		},
		initStatu() {
			this.$myRequest({
				url: '/devStatus/getStatus'
			}).then(rep => {
				this.statuList = rep.result
			})
		},
		doMainChange(e){
			if (e) {
				this.submitData.domain = e.newVal.label
				this.$myRequest({
					url: '/devStatus/getSystem?parentId='+ e.newVal.value,
				}).then(rep => {
					this.systemNameList = rep.result
					this.$refs.systemName.onClear()
					this.$refs.eventType.onClear()
				})
			} else {
				this.submitData.domain = ''
			}
		},
		systemNameChange(e){
			if (e) {
				this.submitData.systemName = e.newVal.label
				this.$myRequest({
					url: '/devStatus/getDevice?parentId='+ e.newVal.value,
				}).then(rep => {
					this.eventTypeList = rep.result
					this.$refs.eventType.onClear()
				})
			} else {
				this.submitData.systemName = ''
			}
		},
		eventTypeChange(e) {
			if (e) {
				this.submitData.eventType = e.newVal.label
			} else {
				this.submitData.eventType = ''
			}
		},
		stationNameChange(e) {
			if (e) {
				this.submitData.stationName = e.newVal.label
			} else {
				this.submitData.stationName = ''
			}
		},
		statuChange(e){
			if (e) {
				this.submitData.taskStatu = e.newVal.value
			} else {
				this.submitData.taskStatu = ''
			}
		},
		// ------------------日期选择器----------------------
		// 取消事件
		cancel(){
		    this.close()
		},
		// 确认事件
		sure(e){
			this.submitData[this.targetInputData] = e.a + '-' + e.b + '-' + e.c
		    // 输出 { year: 100100,month: 3,day: 23}
		},
		// picker显示
		showPop(event, paramName){
			this.targetInputData = paramName
		    this.show = true
		},
		// 关闭picker
		close(){
		    this.show = false
		},
		
		//-----------------------------------------------
		submitForm (e) {
			uni.showLoading({
				title:"添加中，请稍等...",
				mask:true
			});
			let inputDatas = e.detail.value
			this.submitData.eventName = inputDatas.eventName
			this.submitData.maintainPerson = inputDatas.maintainPerson
			this.submitData.maintainContent = inputDatas.maintainContent
			this.submitData.describe = inputDatas.describe 
			this.$myRequest({
				url: '/et/maintain/addRecord',
				method: 'POST',
				data: this.submitData
			}).then(rep => {
				if(rep.code === 'success' || rep.message === '添加成功'){
					uni.navigateTo({
						url:'./equipmentRecord',
						success: res => {
							console.log('跳转成功');
						},
						fail: res => {
							console.log(res);
						},
					});
				}else {
					this.$refs.popupMessage.open()
					this.errorMessage = rep.message
				}
			})
		},
		pageChange (e) {
			this.initMtRecord(e.current,10)
		}
	},
	components:{
		minPicker,
		minPopup,
		uniPagination,
		uniPopupMessage,
	},
	created() {
		this.initDoMain(),
		this.initStationName(),
		this.initStatu()
	}
}
</script>

<style>
	
	.uni-textarea {
		height: 100rpx;
		width: 645rpx;
		padding: 15rpx 25rpx 15px;
		line-height:40rpx;
		font-size:28rpx;
		background:#FFF;
		flex: 1;
	}
	
	.submit-button {
		margin: 50rpx 30rpx 0rpx;
	}
</style>
